<template>
  <div class="register_container">
    <div class="register-div">
      <div class="logo-div"></div>
      <div class="form-div">
        <div class="parcel-div">
          <el-form ref="registerForm">
            <div class="account-div">
              <div class="parcel-div">
                <span class="fa fa-user-o fa-lg"></span>
              </div>
              <input type="text" placeholder="请输入用户名" autocomplete="off" v-model.trim="registerForm.uUsername" />
            </div>
            <div class="account-tip-div" ref="account-tip-div">{{ tipInfo.account }}</div>
            <div class="pwd-div">
              <div class="parcel-div">
                <span class="fa fa-lock fa-lg"></span>
              </div>
              <input type="password" placeholder="请输入密码" v-model.trim="registerForm.uPassword" />
            </div>
            <div class="pwd-tip-div" ref="pwd-tip-div">{{ tipInfo.pwd }}</div>
            <div class="again-pwd-div">
              <div class="parcel-div">
                <span class="fa fa-lock fa-lg"></span>
              </div>
              <input type="password" placeholder="请再次输入密码" v-model.trim="registerForm.reuPassword" />
            </div>
            <div class="again-pwd-tip-div" ref="again-pwd-tip-div">{{ tipInfo.againPwd }}</div>
            <div class="verification-div">
              <input
                id="verify-input"
                type="text"
                placeholder="验证码"
                v-model.trim="registerForm.code"
                autocomplete="off" />
              <div
                :class="['verify', registerForm.uUsername === '' ? 'disable' : '']"
                ref="verify"
                @click="getImageGenerate"></div>
            </div>
            <div class="verification-tip-div" ref="verification-tip-div">{{ tipInfo.verification }}</div>
            <div id="button-div" class="button-div">
              <input type="submit" value="Sign in" @click="submitForm" />
            </div>
            <div class="text-div"><span>已注册可</span><router-link to="/login">直接登录</router-link></div>
          </el-form>
        </div>
        <!-- 注册成功 -->
        <div class="registerSuccess">
          <span>注册成功</span>
        </div>
        <!-- 请返回登录页 -->
        <div class="backToLogin">
          <span>请返回登录页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data() {
    return {
      registerForm: {
        uUsername: 'unable',
        uPassword: '2578590821Jqx&',
        reuPassword: '2578590821Jqx&',
        code: ''
      },
      tipInfo: {
        account: '',
        pwd: '',
        againPwd: '',
        verification: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.tipInfo = {
        account: '',
        pwd: '',
        againPwd: '',
        verification: ''
      }
      this.$http
        .post('/user/register', this.registerForm)
        .then(res => {
          console.log(res)
          if (res.state === false) {
            if (res.code === '1') {
              this.tipInfo.account = res.errorMsg
            } else if (res.code === '2') {
              this.tipInfo.pwd = res.errorMsg
            } else if (res.code === '3') {
              this.tipInfo.againPwd = res.errorMsg
            } else if (res.code === '4') {
              this.tipInfo.verification = res.errorMsg
            }
            return
          }
          this.$message.success(res.data + ',即将跳转登录页')
          window.setTimeout(() => {
            this.$router.push('/login')
          }, 2000)
        })
        .catch(err => this.$message.error(err))
    },
    getImageGenerate() {
      this.$refs.verify.style.backgroundImage = 'url(http://localhost:9999/user/imageGenerate/?a=' + Math.random() + ')'
    }
  }
}
</script>

<style lang="less" scoped>
.disable {
  pointer-events: none;
}
a {
  color: #f10180;
  text-decoration: none;
}

.register_container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('@/assets/images/landscapePhoto.jpg');
}

.register-div {
  top: 21%;
  right: 8%;
  width: 28%;
  height: 58%;
  min-width: 420px;
  min-height: 510px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.logo-div {
  height: 25%;
  background-size: 35%;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  background-image: url('@/assets/images/logo.png');
}

.form-div {
  height: 75%;
  position: relative;
}

.form-div > .parcel-div {
  width: 60%;
  height: 100%;
  display: flex;
  margin: 0 auto;
  min-width: 312px;
  flex-direction: column;
  justify-content: center;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.account-div,
.pwd-div,
.again-pwd-div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
}

.account-div input,
.pwd-div input,
.again-pwd-div input {
  background-color: rgba(0, 0, 0, 0);
}

.account-div .parcel-div,
.pwd-div .parcel-div,
.again-pwd-div .parcel-div {
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.account-div .parcel-div span,
.pwd-div .parcel-div span,
.again-pwd-div .parcel-div span {
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
}

input {
  width: 100%;
  border: none;
  height: 1.3em;
  outline: none;
  font-size: 20px;
  padding: 3% 5% 3% 0%;
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.account-tip-div,
.pwd-tip-div,
.again-pwd-tip-div,
.verification-tip-div {
  height: 20px;
  color: red;
  line-height: 20px;
}

#verify-input {
  width: 5em;
  flex-grow: 1;
  padding-left: 10px;
}

.verification-div {
  display: flex;
}

.verify {
  width: 150px;
  cursor: pointer;
  margin-left: 25px;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-image: url('http://localhost:9999/user/imageGenerate');
}

.button-div input {
  padding: 0;
  width: 100%;
  height: 2em;
  border: none;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.5s ease;
  color: rgb(251, 237, 232);
  background-color: #009688;
}

.button-div input:hover {
  background-color: #c10000;
}

.text-div {
  text-align: right;
}

.text-div span {
  line-height: 30px;
  color: rgba(255, 255, 255, 0.8);
}

/********************* 注册成功 *********************/
.registerSuccess {
  left: 0;
  right: 0;
  bottom: 0;
  top: -48px;
  z-index: 2;
  width: 72px;
  height: 24px;
  margin: auto;
  display: none;
  padding: 12px 20px;
  position: absolute;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.registerSuccess span {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

/********************* 请返回登录页 *********************/
.backToLogin {
  left: 0;
  right: 0;
  bottom: 0;
  top: -48px;
  z-index: 2;
  width: 108px;
  height: 24px;
  margin: auto;
  display: none;
  padding: 12px 20px;
  position: absolute;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.backToLogin span {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}
</style>
